<template>
   <div>
       <Table :columns="columns" :data="questionnaireList" style="margin-top:20px"></Table>
        <Modal
            v-model="statisticsModal"
            :title="statisticsTitle"
            :footer-hide="true">
            <QuestionList 
                :data="statisticsList"
                :joined="joined"
                :isDetail="true"
                style="display:inline-block;width:500px"/>
        </Modal>
   </div>
</template>

<script>
import QuestionList from '@/components/question-list-qt/question-list.vue'
import { getQuestionnaireStatistics } from '@/api/questionnaire-survey'
export default {
    props:['questionnaireList'],
    components: {
			QuestionList
		},
   data(){
       return{
           statisticsTitle: '',
           statisticsModal:false,
           joined: 0,
           statisticsList: [],
            columns: [
                    {
                        title: '问卷名称',
                        key: 'name',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    },
                     {
                        title: '描述',
                        key: 'description',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    },
                    {
                        title: '创建者',
                        key: 'creatorName',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                        // opList:[
                        //     {
                        //         txt:"查看",
                        //         on:{
                        //             click: (data) => {
                        //                 this.getQuestionnaireStatistics(data.id, data.name)
                        //             },
                        //         }
                        //     }
                        // ],
                        render:(h,params) =>{
                            return h('span', {
                                style: {
                                    color: 'var(--operation-useable)',
                                },
                                on:{
                                    click: (e) => {
                                        this.getQuestionnaireStatistics(params.row.id, params.row.name)
                                    },
                                }
                            }, "查看");
                        }
                    }
                ],
       }
   },
   methods:{
       getQuestionnaireStatistics(id, name) {
            getQuestionnaireStatistics(id).then(({ code, message, data }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.statisticsModal = true
                this.statisticsTitle = name
                let list = data.contents || []
                let joined = data.joined
                this.statisticsList = list.map(item => {
                    item.analysis.forEach(items=>{
                        this.$set(items, 'no', items.label);
                        this.$set(items, 'percent', joined === 0 ? 0 : Number((items.joined / joined * 100).toFixed(2)))
                    })
                    this.$set(item, 'answers', item.analysis);
                    this.$set(item, 'name', item.description);
                    if (item.type===0) {
                        this.$set(item, 'modeCode', 1);
                    } else if (item.type===2) {
                        this.$set(item, 'modeCode', 6);
                        this.$set(item, 'description', item.description);
                    } else {
                        this.$set(item, 'modeCode', 2);
                    }
                    return item
                })
                this.joined = joined
            }).catch(() => {
                this.$Message.error('获取问卷调查提交详情异常')
            })
        },
   }
}
</script>

<style>

</style>